<template>
  <div
    class="video-player"
    :style="{
      height: compData.style.height + 'px',
    }"
  >
    <video v-if="!compData.data.src" controls>
      <source :src="compData.data.videoUrl" />
    </video>
    <sa-image :url="compData.data.src" fit="fill" :suffix="null" />
  </div>
</template>

<script setup>
  const props = defineProps(['compData']);
</script>

<style lang="scss" scoped>
  .video-player {
    height: 200px;
    background: #f3f3f3;
    .sa-image {
      height: 100%;
    }
    video {
      width: 100%;
      height: 100%;
    }
  }
</style>
